<template>
  <div class="bg">
    <img src="./assets/zhizhen.png" class="luckDraw" @click="onLotteryHandle">
    <ul class="gift-main" ref="turntableRef">
      <li v-for="(item, index) in giftList" :key="index" :style="{transform: `rotate(${ item.startAreaDeg }deg)`}">
        <span class="gift-area" :style="{transform: `rotate(${ giftAreaRange/2 }deg) skewY(${90-giftAreaRange}deg)`}"></span>
        <div class="prize">
          <div>{{item.title}}</div>
          <div>图片位置</div>
        </div>
      </li>
    </ul>
  </div>  
</template>

<script>
/**
 * 抽奖大转盘
 * 1.可配置抽奖内容
 * 2.可配置抽奖概率
 * 3.可配置旋转方向 0是顺时针 1是逆时针
  */
import { ref, onMounted } from "vue";

export default {
  name: "luckyLottery",
  /***
   * setup特性：
   * 1.生命周期处理位置
   * 2.不可调用外部的data与methods方法
   * 3.接收两个参数props与context 即继承子组件的通信数据
   * 4.ref包装的数据是个对象，获取值和赋值必须要走value层
   */
  setup() {
    const giftList = ref([
      {
        title: "未中奖",
        probability: [0, 0.1] //0-0.1
      },
      {
        title: "提高白条额度",
        probability: [0.1, 0.2] //0.1-0.2
      },
      {
        title: "免分期服务费",
        probability: [0.2, 0.3] //0.2-0.3
      },
      {
        title: "面单5元",
        probability: [0.3, 0.5] //0.3-0.5
      },
      {
        title: "面单10元",
        probability: [0.5, 0.7] //0.5-0.7
      },
      {
        title: "面单20元",
        probability: [0.7, 0.9] //0.7-0.9
      },
      {
        title: "面单50元",
        probability: [0.9, 1] //0.9-1
      }
    ]);
    const turntableRef = ref(null); //获取dom元素
    const giftAreaRange = ref(360 / giftList.value.length); // 每个奖品区域范围
    const num = ref(0); //转圈结束后停留的度数 用来定位获取的奖品
    const offOnRotate = ref(true); //是否旋转
    const rotateDeg = ref(0); //旋转的度数
    const prevRdm = ref(0); //剩下的度数
    const turnsNum = ref(3);
    const winPrizeItem = ref({});
    const directionType=ref(0)
    // 挂载
    onMounted(() => {
      // 每个奖品的角度
      giftList.value.forEach((item, index) => {
        item.startAreaDeg = giftAreaRange.value * index; //奖品开始的角度
      });
    });

    // 开始抽奖
    function onLotteryHandle() {
      // 正在旋转中 防抖
      if (!offOnRotate.value) {
        return;
      }

      offOnRotate.value = !offOnRotate.value;
      let random = Math.random().toFixed(1); //随机数
      let giftIndex;
      for (let index in giftList.value) {
        let item = giftList.value[index];
        //概率范围
        let minProbability = item.probability[0];
        let maxProbability = item.probability[1];

        // 如果随机数在此范围内 命中概率 获取该礼物下标
        if (minProbability <= random && random < maxProbability) {

          giftIndex = directionType.value === 1 ?  -index : giftList.value.length - index;
          console.log("当前礼物", giftIndex, item);
          winPrizeItem.value = item;
          ratating(giftIndex);
          return;
        }
      }
      console.error("没有命中礼物，请检查");
    }
    // 开始旋转
    function ratating(giftIndex) {
      //定义本次抽奖结果, 即需要旋转的度数
      let curRdm = Math.floor(giftIndex * giftAreaRange.value);
      // 最少旋转三圈; 360- prevRdm.value: 命中礼物都有个范围 计算剩余未旋转的度数
      let randomDeg=directionType.value === 1 ? -(360 + prevRdm.value ) - 360 * turnsNum.value : 360 - prevRdm.value + 360 * turnsNum.value
      //存储上一次旋转度数
      prevRdm.value = curRdm;

      rotateDeg.value += randomDeg + curRdm;

      turntableRef.value.style.transform = "rotate(" + rotateDeg.value + "deg)";

      // 过渡动画是4秒 所以延迟4秒后再展示结果
      getGiftTipHandle();
    }
    function getGiftTipHandle() {
      setTimeout(() => {
        //礼物结果出来后, 可以点击再次旋转
        offOnRotate.value = !offOnRotate.value;

        alert("恭喜获得:" + winPrizeItem.value.title);
        // console.log("rdm=" + randomDeg + "，num=" + this.num + "，" + "4999元");
      }, 4000);
    }
    // return出去的可以与页面进行交互和传递数据
    return {
      turntableRef,
      onLotteryHandle,
      giftList,
      giftAreaRange
    };
  }
};
</script>
<style lang="scss" >
.bg {
  height: 600px;
  margin: 0 auto;
  width: 650px;
  margin: 0 auto;
  background: url("./assets/beijing.jpg") no-repeat;
  position: relative;
}
.luckDraw {
  position: absolute;
  z-index: 1000;
  top: 155px;
  left: 247px;
  cursor: pointer;
}
.gift-main {
  width: 450px;
  height: 450px;
  list-style: none;
  position: absolute;
  top: 60px;
  left: 116px;
  z-index: 100;
  display: flex;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
  transition: all 4s ease-in-out;
  li {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 450px;
    height: 225px;
    transform-origin: center bottom;
  }
  .gift-area {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -50%;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255, 221, 0, 0.3);
    box-shadow: inset -1px 0 0 rgba(255, 153, 0, 0.7),
      inset 0 -1px 0 rgba(255, 255, 255, 0.4);
    transform-origin: right bottom;
  }
  .prize {
    position: relative;
    margin: 0 auto;
    padding-top: 20px;
    width: 50%;
    overflow: hidden;
    text-align: center;
    line-height: 25px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}
</style>

